<template>
  <div style="width: 100%; height: 100%;">
    <el-row style="height: 100%">
      <el-col :span="8" style="height: 100%; padding: 6px;border: 1px solid #d2d6de;">
        <el-input v-model="keyword" placeholder="设备类型" style="width: 200px;" size="small">
          <el-button slot="append" icon="fa fa-search"></el-button>
        </el-input>
        <el-button plain title="收起" icon="fa fa-compress">收起</el-button>
        <el-divider content-position="left">王峰煤矿</el-divider>

        <el-table :data="tableData">
          <el-table-column property="date" label="数据日期" width="180"></el-table-column>
          <el-table-column property="name" label="负责人" width="180"></el-table-column>
          <sea-col-link property="address" label="设备名称"></sea-col-link>
        </el-table>

        <el-divider content-position="left">一号设备</el-divider>

        <div ref="canvas" style="overflow: hidden; height: 260px">
        </div>
      </el-col>
      <el-col :span="16" style="height: 100%">
        <div id="map" class="map" style="width: 100%; height: 100%;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import '@/style/ol.css';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import TileLayer from 'ol/layer/Tile.js';
import XYZ from 'ol/source/XYZ.js';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector.js';

import Style from 'ol/style/Style.js';
import Text from 'ol/style/Text.js';
import Icon from 'ol/style/Icon.js';
import Fill from 'ol/style/Fill.js';

import * as charts from "echarts";


export default {
    name: 'OpenLayersMap',
    components: {},
    data() {
        return {
            map: null,
            keyword: null,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '一号设备'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '二号设备'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '三号设备'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '四号设备'
            }]
        };
    },
    mounted() {
        this.initMap();

        this.initChart();
    },
    methods: {
        initMap() {
            let layerVector = new LayerVector({
                source: new SourceVector()
            });

            let map = new Map({
                view: new View({
                    center: [12950000, 4860000],
                    zoom: 7
                }),
                layers: [
                    new TileLayer({
                        source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'})
                        // source: new XYZ({url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'})
                    }),
                    layerVector
                ],
                target: 'map',
            });

            this.map = map;

            // GNSS
            // let icon ="";
            // 钢筋计
            // let icon ="";
            // 倾角仪
            let icon ="";

            let background ="";

            //样式
            let iconStyle = [
                new Style({
                    //背景图标
                    image: new Icon({
                        src: background
                    })
                    // 文本样式
                    , text: new Text({
                        text: 'this is a point',
                        offsetY: '16',
                        textAlign: "center",
                        // font: 'bold 24px serif',
                        fill: new Fill({
                            color: '#FFF'
                        })
                        , backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 1)', // 背景颜色
                        }),
                    })
                })
                , new Style({
                    //背景图标
                    image: new Icon({
                        src: icon
                        , anchorOrigin: 'top-center'
                        , size: [30, 148]
                        , scale: 0.5
                    })
                })
            ];

            //特征点
            let pointFeature = new Feature({
                geometry: new Point([12950000, 4860000])
            });

            pointFeature.setStyle(iconStyle);

            layerVector.getSource().addFeature(pointFeature);


            map.on('click', function (evt) {
                map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                    Layers.succeed('功能建设中！');
                });
            });
        },

        initChart() {
            let chart = charts.init(this.$refs.canvas);

            // Echarts 需要延迟载入，避免组件错位
            setTimeout(() => {
                chart.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        barWidth: 16,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                });
                this.loading = false;
            }, 100);
        }
    },
};
</script>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>